<template>
  <div class="group">
    <div class="p-r fulled-h" @click.self="handleClick">
      <!-- 子组件控制层 -->
      <div
        v-for="(item, i) in config.component"
        :key="item.id"
        class="sub-component"
        :class="{ active: isActiveSubComponent(i) }"
        :style="
          getStyle(item.style, [
            'position',
            'width',
            'top',
            'left',
            'paddingTop',
            'paddingBottom',
            'paddingLeft',
            'paddingRight',
            'zIndex'
          ])
        "
        @mousedown="handleMousedown(i, $event)"
      >
        <!--真实组件 -->
        <component
          :is="item.component"
          :id="item.id"
          :key="item.id"
          :widget="item"
          :index="i"
          :style="
            getStyle(item.style, [
              'color',
              'fontSize',
              'fontWeight',
              'textDecoration',
              'textAlign',
              'opacity',
              item.flexible ? '' : 'height'
            ])
          "
          class="fulled-w fulled-h"
        />
        <div v-for="(num, key) in 4" :key="num" :class="`shape-line line-${['l', 't', 'r', 'b'][key]}`"></div>
      </div>
    </div>
  </div>
</template>
<script>
  import { mapGetters } from 'vuex';
  import { getStyle } from '@/utils';
  import Shape from '../previewPanel/Shape';
  import { Basic, H5 } from '../../landingPageWidget/index';

  export default {
    name: 'Group',
    components: {
      Shape,
      ...Basic.layouts,
      ...H5.layouts
    },
    props: {
      index: { type: [Number, String], default: undefined },
      widget: {
        type: Object,
        default: () => ({})
      }
    },
    computed: {
      ...mapGetters('component', ['isActiveComponent', 'activeComponent']),
      style() {
        return this.widget.style;
      },
      config() {
        return this.widget.config;
      },
      activeSubComponentIndex: {
        get() {
          return this.widget.data.activeSubComponentIndex;
        },
        set(value) {
          this.widget.data.activeSubComponentIndex = value;
        }
      },
      activeParentGroup() {
        if (this.$parent.$options.name === 'Shape') return this.isActiveComponent(this.index);
        return this.$parent.activeSubComponentIndex === this.index;
      }
    },
    watch: {
      activeParentGroup(value) {
        if (!value) this.activeSubComponentIndex = '';
      },
      'style.width': function (newValue, oldValue) {
        this.config.component.forEach((component) => {
          const style = component.style;
          const left = newValue * (style.left / oldValue);
          const width = newValue * (style.width / oldValue);
          style.left = Number(left.toFixed(1));
          style.width = Number(width.toFixed(1));
        });
      },
      'style.height': function (newValue, oldValue) {
        this.config.component.forEach((component) => {
          const style = component.style;
          const top = newValue * (style.top / oldValue);
          style.top = Number(top.toFixed(1));
          const height = newValue * (style.height / oldValue);
          style.height = Number(height.toFixed(1));
        });
      }
    },

    methods: {
      getStyle,
      isActiveSubComponent(i) {
        return this.activeSubComponentIndex === i;
      },
      handleMousedown(i, event) {
        if (!this.activeParentGroup) return;
        this.activeSubComponentIndex = i;
      },
      handleClick() {
        this.activeSubComponentIndex = '';
      }
    }
  };
</script>

<style lang="scss" scoped>
  .sub-component {
    &.active > .shape-line {
      display: block;
    }

    // 边线
    .shape-line {
      position: absolute;
      z-index: 998;
      display: none;

      &.line-l,
      &.line-r {
        top: 0;
        width: 0;
        height: 100%;
      }

      &.line-t,
      &.line-b {
        left: 0;
        width: 100%;
        height: 0;
      }

      &.line-l {
        left: 0;
        border-left: 1px solid map-get($bdColors, 'theme');
      }

      &.line-r {
        right: 0;
        border-right: 1px solid map-get($bdColors, 'theme');
      }

      &.line-t {
        top: 0;
        border-top: 1px solid map-get($bdColors, 'theme');
      }

      &.line-b {
        bottom: 0;
        border-bottom: 1px solid map-get($bdColors, 'theme');
      }
    }
  }
</style>
